<template>
  <div>
    <logo-header-dark title="用户中心"></logo-header-dark>
    <div class="content-wrap">
      <div class="left">
        <div class="menus">
          <div v-for="(menu,index) in menus" :key="index" class="menu">
            <h3 class="menu-name">{{menu.name}}</h3>
            <div v-for="(subMenu,idx) in menu.children" :key="idx" class="sub-menu" :class="{active:subMenu.path===currentPath}">
              <router-link :to="'/u/user/'+subMenu.path">{{subMenu.name}}</router-link>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="sub-content">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LogoHeaderDark from './components/LogoHeaderDark';

export default {
    components: {
        LogoHeaderDark
    },
    data() {
        return {
            menus: [
                {
                    name: '账号管理',
                    children: [
                        {
                            name: '基础信息',
                            path: 'info'
                        },
                        {
                            name: '认证',
                            path: 'auth'
                        },
                        {
                            name: '账号安全',
                            path: 'secure'
                        }
                    ]
                },
                {
                    name: '交易操作',
                    children: [
                        {
                            name: '求购',
                            path: 'want'
                        },
                        {
                            name: '出货',
                            path: 'sell'
                        }
                    ]
                },
                {
                    name: '交易记录',
                    children: [
                        {
                            name: '求购信息',
                            path: 'want-list'
                        },
                        {
                            name: '出货信息',
                            path: 'sell-list'
                        }
                    ]
                }
            ]
        };
    },
    computed: {
        currentPath() {
            const path = this.$route.path;
            return path.substring(path.lastIndexOf('/') + 1);
        }
    },
    methods: {
    }
};
</script>

<style lang="scss">
  @import "../../assets/front/front";

  .content-wrap {
    display: flex;
  }

  .left {
    padding: 30px;
    width: 150px;
    background: $bg-color;
    text-align: right;
    .sub-menu {
      padding: 5px 0;
      color: $font-dark-color;
      &.active {
        color: $main-color;
      }
    }
  }

  .right {
    padding:10px;
    flex: 1;
  }

</style>
